<template lang="pug">
  .headerNotice
    el-popover(trigger="click" placement="bottom" width="320" popper-class="noticePopper")
      el-badge(:value="dotNum" :hidden="true" :max="99" slot="reference")
        .titleBox
          span.iconBox
            img(src="@/assets/notification.png")
          p 通知
          .yuan
          .yuan
          div(v-if="dotNum")
      .box-header
        a(
          v-for="item in notice" :key="item.noticeType"
          @click="noticeType = item.noticeType"
          :class="{active: noticeType === item.noticeType}"
        ) {{item.label}}
      .box-content(v-loading="loading")
        .notice-item(v-for="item in list" :key="item.id")
          header
            el-tag(type="success" size="mini") {{item.operatorName}}
            span.title {{item.title}}
          p.content {{item.content}}
          small.time {{item.created | dateFilter}}
        empty(v-if="list.length === 0")
      .box-footer
        a(@click="() => modalHandle({ type: 'add' })") 新增通知
        a.more(v-if="list.length >= 5") 查看更多
    modal-form(
      v-if="modalObj.type === 'add'"
      title="添加通知"
      :visible.sync="modalObj.visible"
      :fields="addItems"
      :submitHandle="addSubmit"
      :submitting="addSubmitting"
      :layoutCol="{ sm: 24, md: 24, lg: 24 }"
    )
</template>
<script>
import Empty from '@/components/Basic/Empty'
import { getNoticeList, addNotice } from '@/api/common'
import { addItems } from './config'

export default {
  components: {
    Empty
  },
  data () {
    return {
      loading: false,
      dotNum: 10,
      noticeType: '3',
      notice: [
        {
          label: '会议',
          noticeType: '3'
        },
        {
          label: '活动',
          noticeType: '2'
        },
        {
          label: '其他',
          noticeType: '1'
        }
      ],
      list: [],
      addSubmitting: false,
      modalObj: {
        visible: false,
        type: 'add'
      }
    }
  },
  computed: {
    addItems () {
      return addItems(this.noticeType)
    }
  },
  watch: {
    noticeType: {
      handler () {
        this.getNoticeList()
      },
      immediate: true
    }
  },
  methods: {
    // 获取通知列表
    getNoticeList () {
      this.loading = true
      getNoticeList({ pageNum: 0, pageSize: 5 }, { noticeType: this.noticeType }).then(res => {
        this.list = res?.content || []
      }).finally(() => {
        this.loading = false
      })
    },
    modalHandle ({ type }) {
      this.modalObj = {
        visible: true,
        type
      }
    },
    // 提交添加内容
    addSubmit (values) {
      console.log(values)
      this.addSubmitting = true
      addNotice(values).then(() => {
        this.$message.success('添加成功')
        this.getNoticeList()
        this.modalObj = {
          type: '',
          visible: false
        }
      }).finally(() => {
        this.addSubmitting = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.box-header {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;

  >a {
    flex: 1;
    text-align: center;
    position: relative;
    cursor: pointer;
    color: $--color-text-secondary;

    &.active {
      color: $--color-text-regular;

      &::after {
        position: absolute;
        content: '';
        display: block;
        background: $green;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        bottom: -10px;
        left: 50%
      }
    }
  }
}

.box-content {
  margin: 20px 0;
  padding: 0 12px;
  background: #fafafa;

  .notice-item {
    margin-top: 12px;
    padding-top: 12px;
    cursor: pointer;

    +.notice-item {
      border-top: 1px dashed $--border-color-light
    }

    header {
      .title {
        font-size: 14px;
        margin-left: 5px
      }
    }

    .content {
      font-size: 13px;
      color: $--color-text-secondary;
      line-height: 1.5;
      margin: 8px 0 5px
    }

    .time {
      color: $--border-color-light
    }
  }
}

.box-footer {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  // border-top: 1px solid $--border-color-lighter;

  >a {
    flex: 1;
    text-align: center;
    height: 24px;
    line-height: 24px;
    color: $panGreen;

    +a {
      border-left: 1px solid $--border-color-lighter;
    }

    &.more {
      color: $--color-text-secondary
    }
  }
}

.titleBox {
  display: flex;
  flex-direction: row;
  align-items: center;

  span {
    padding-right: 16px;
  }

  font-family: Source Han Sans SC,
  Source Han Sans SC;
  font-weight: 400;
  font-size: 14px;
  color: #000000;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.headerNotice {
  align-items: center;
  display: flex;

  span {
    position: relative;
  }
}

.yuan {
  top: 0;
  position: absolute;
  width: 6px;
  height: 6px;
  background: #FF8B00;
  border-radius: 6px;
  left: 20px;
}
</style>
